<template>
	    <!-- <el-input v-model="classcode" placeholder="请输入班级编号" />
	    <el-input v-model="classcode" placeholder="请输入班级编号" />
	    <el-button class="searchBtn" type="info" :icon="Search">搜索</el-button>
	    <el-button class="addBtn" type="info" :icon="CirclePlus">添加</el-button>
	 -->
	 <div class="top">
	 	<p>申请</p>
	 	<span  @click="back1" style="cursor:pointer;">返回</span>
	 </div>
	 
	<el-form
		ref="formDataRef"
	    style="max-width: 700px"
	    :model="formData"
	    :rules="rules"
	>
		<div class="one">
			<el-form-item label="请假天数:" prop="num" label-width="100">
				<el-input v-model.number="formData.num" placeholder="请输入请假天数" required/>
			</el-form-item>
			<el-form-item label="请假原因:" prop="content" label-width="100">
				<el-input placeholder="说明原因" v-model="formData.content"></el-input>
			</el-form-item>
		</div>
		<div class="one">
			<el-form-item label="请假类型:" prop="typeId" label-width="100">
				<el-select v-model="formData.typeId" placeholder="请选择请假类">
					<!-- <el-option label="Zone one" value="shanghai" v-for="typeoption" /> -->
					<!-- <el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" /> -->
				<el-option 
				v-for="item in typeoption" 
				:label="item.typeName" 
				:value="item.typeId"
				:key="item.typeId"
				 />
					
				</el-select>
			</el-form-item>
			<el-form-item label="审批人:" prop="adminId" label-width="100">
				<el-select v-model="formData.adminId" placeholder="请选择审批人">
					<el-option
					v-for="item in justpersonoptin" 
					:label="item.userName" 
					:value="item.userId"
					:key="item.userId"
					 />
				</el-select>
			</el-form-item>
		</div>
		<div class="one">
			<el-form-item prop="startTime" label="起始时间:" label-width="100">
			  <el-date-picker
				v-model="formData.startTime"
				type="date"
				aria-label="Pick a date"
				placeholder="请选择起始时间"
				style="width: 205px"
			  />
			</el-form-item>
			<el-form-item prop="endTime" label="截止时间:" label-width="100">
			  <el-date-picker
				v-model="formData.endTime"
				type="date"
				aria-label="Pick a date"
				placeholder="请选择截止时间"
				style="width: 205px;margin-right: 10px;"
			  />
			</el-form-item>
		</div>
		
		<div  style="margin-top: 60px;margin-left: 40px;">
			<el-button class="searchBtn" type="info" @click="teacherleaveapplyFn(formDataRef)">确认</el-button>
			<el-button type="info" @click="back">取消</el-button>
		</div>
	</el-form>
	
</template>

<script setup lang="ts">
	import { reactive,onMounted,ref,defineEmits } from 'vue';
	import {Search,CirclePlus} from '@element-plus/icons-vue'
	import {justperson,teacherleaveapply,leaveType} from "@/api/wrd";
	import type { FormInstance, FormRules } from 'element-plus'
	import type {leavetypeResponseType,teacherleaveResponseType,justpersonresponseType} from "../modal/wrd/leave";
	import { ElMessage, ElMessageBox } from 'element-plus'
	let formData=reactive({
		userId:sessionStorage.getItem('userId') ? sessionStorage.getItem('userId') :21,
		num:'',
		adminId:'',
		content:'',
		typeId:'',
		startTime:'',
		endTime:''
	})
	//接受函数
	// const emits=defineEmits(["back"])
	type emitType={
		(e:'back'):void;
	}	
	const emits=defineEmits<emitType>()
	const back=()=>{
		formData.num='',
		formData.adminId='',
		formData.content='',
		formData.typeId='',
		formData.startTime='',
		formData.endTime=''
	}
	const back1=()=>{
		emits("back")
	}
	let formDataRef=ref<any>(null)
	//请假申请
	const teacherleaveapplyFn=async(formEl:FormInstance)=>{
		// console.log(formData.startTime);
		formData.startTime= formData.startTime.toLocaleString().split(" ")[0].replace(/\//g, '/')
		formData.endTime=formData.endTime.toLocaleString().split(" ")[0].replace(/\//g, '/')
		// console.log(formData.startTime);
		// console.log(formData.endTime);
		console.log("formData",formData)
		formEl.validate(async (valid:boolean,fileds)=>{
			if(valid){
				let res:teacherleaveResponseType|undefined=await teacherleaveapply(formData)
				console.log("请假申请",res)
				if(!res){
					ElMessage({
						type: 'success',
						message: `申请成功`,
					  })
					  setTimeout(()=>{
						 emits("back")
					  },600)
				}
			}
		})
	}
	
	
	//查询审批人
	let justpersonoptin=ref<any>([])
	const justpersonFn=async()=>{
		let res:justpersonresponseType|undefined= await justperson({
			userId: sessionStorage.getItem('userId')
		})
		console.log("审批人",res)
		justpersonoptin.value=res
	}
	
	//查询请假类型
	let typeoption=ref<any>([])
	const leaveTypeFn=async()=>{
		let res:leavetypeResponseType|undefined = await leaveType()
		typeoption.value=res
		console.log(typeoption.value)
		console.log("请假类型",res)
	}
	//表单验证
	const checkUserName=(rule:any,value:any,callback:any)=>{
		let reg=/^[0-9]+$/
		if (value === '') {
		    callback(new Error('请假天数不能为空'))
		  } else if (!reg.test(value)) {
		    callback(new Error("请输入数字"))
		  } else {
		    callback()
		  }
	}
	
	let rules=reactive<FormRules>({
		num:[
			{
				validator:checkUserName,
				required: true,
				trigger: 'blur'
			}
		],
		content:[
			{
				required: true,
				trigger: 'blur',
				message:"请假说明不能为空"
			}
		],
		typeId:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择请假类型"
			}
		],
		adminId:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择审批人"
			}
		],
		startTime:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择起始时间"
			}
		],
		endTime:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择结束时间"
			}
		],
	})
	
	onMounted(()=>{
		leaveTypeFn()
		justpersonFn()
	})
	
</script>

<style scoped lang="less">
	.top{
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        p{
	            font-size: 21px;
	            font-weight: 600;
	        }
	        span{
	            font-size: 17px;
	        }
	    }
	.el-form{
		margin-top: 20px;
	}
	// .btnbox{
	// 	width: 150px;
	// 	margin-top: 200px;
	// 	justify-content: space-between;
	// 	display: flex;
	// }
	.one{
		// width: 60%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.el-select{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
</style>